<template>
  <div class="critic">
    <van-popup
      :value="value"
      @input="v => $emit('input', v)"
      position="bottom"
      @click-overlay="heidclick"
      :style="{ height: '70%' }"
      @open="onopen"
    >
      <div class="tck">
        <div class="title">当前评论</div>
        <div class="primary">
          <div class="img">
            <van-image :src="item.aut_photo">
              <template v-slot:error>
                <img src="@/assets/Snipaste.png" alt="" />
              </template>
            </van-image>
          </div>
          <!-- <img v-if="item.aut_photo" :src="item.aut_photo" alt="" />
          <img v-else src="../../assets/logo.png" alt="" /> -->
          <div class="meddle">
            <div class="name">{{ item.aut_name }}</div>
            <div class="pl">{{ item.content }}</div>
            <div class="datess">{{ item.pubdate | fromtime }}</div>
          </div>
          <div class="dianz">
            <van-icon
              name="like"
              @click="likedisn"
              :class="{ color: item.is_liking }"
            />
            <span>{{ item.like_count }}</span>
          </div>
        </div>
        <div class="title2">
          <div>评论的回复</div>
        </div>
        <div class="btnoo">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onload"
          >
            <div class="primary" v-for="(item, index) in list" :key="index">
              <div class="img">
                <van-image :src="item.aut_photo">
                  <template v-slot:error>
                    <img src="@/assets/Snipaste.png" alt="" />
                  </template>
                </van-image>
              </div>
              <!-- <img v-if="item.aut_photo" :src="item.aut_photo" alt="" /> -->
              <!-- <img v-else src="../../assets/logo.png" alt="" /> -->
              <div class="meddle">
                <div class="name">{{ item.aut_name }}</div>
                <div class="pl">{{ item.content }}</div>
                <div class="datess">{{ item.pubdate | fromtime }}</div>
              </div>
              <div class="dianz">
                <van-icon
                  name="like"
                  @click="likeclick(item, item.is_liking, index)"
                  :class="{ color: item.is_liking }"
                />
                <span class="icon">{{ item.like_count }}</span>
              </div>
            </div>
          </van-list>
        </div>
        <div class="bottom">
          <van-field v-model.trim="sms" cpnter placeholder="写评论">
            <template #button>
              <div>
                <van-button size="normal" color="#d0584d" @click="addcommit"
                  >发送</van-button
                >
              </div>
            </template>
          </van-field>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import {
  apiGetCommentReply,
  apiAddCommentReply,
  apiAddCommentlikings,
  apiAddCommentlikingsID
} from '../../api/comment'
export default {
  props: ['value', 'idd', 'item', 'listss', 'index'],
  data () {
    return {
      limit: 10,
      loading: false,
      finished: false,
      offset: undefined,
      offset2: undefined,
      commid: '',
      list: [],
      sms: '',
      bol: true
    }
  },
  created () {},
  methods: {
    // 被回复评论点赞事件
    likedisn () {
      this.$emit('likediss', this.item)
    },
    // 回复评论点赞事件
    async likeclick (item, state, index) {
      // 评论点赞
      const com = item.com_id.c[0] + '' + item.com_id.c[1]
      console.log(com)
      if (!state) {
        const res = await apiAddCommentlikings(com)
        this.list[index].is_liking = true
        this.list[index].like_count++
        console.log(res)
      } else {
        this.list[index].is_liking = false
        this.list[index].like_count--
        const res = await apiAddCommentlikingsID(com)
        console.log(res)
      }
    },
    // 发送按钮点击事件
    async addcommit () {
      this.commid = this.item.com_id.c[0] + '' + this.item.com_id.c[1]
      const res = await apiAddCommentReply({
        commid: this.commid,
        content: this.sms,
        artid: this.idd
      })
      console.log('发送按钮点击事件', res)
      this.onopen()
      this.$emit('amend', this.index)
    },
    heidclick () {
      this.$emit('criticlick', false)
      this.bol = true
    },
    onopen () {
      // 打开弹出框事件
      // 清空数据
      this.loading = false
      this.finished = false
      this.offset = undefined
      this.commid = ''
      this.list = []
      this.sms = ''
      // if (!this.bol) {
      //   this.onload()
      // }
      this.bol = false
    },
    // 自动加载事件
    async onload () {
      this.commid = this.item.com_id.c[0] + '' + this.item.com_id.c[1]
      const res = await apiGetCommentReply({
        commid: this.commid,
        offset: this.offset,
        limit: this.limit
      })
      // console.log('自动加载评论回复', res)
      this.offset = res.data.data.last_id
      this.list.push(...res.data.data.results)
      this.loading = false
      // console.log(this.list.length, res.data.data.total_count)
      console.log('自动加载评论回复', this.list)
      console.log('被回复的评论', this.item)
      if (this.list.length >= res.data.data.total_count) {
        this.finished = true
      }
    }
  }
}
</script>

<style lang="less">
.critic {
  .color {
    color: #d0584d !important;
  }
  box-sizing: border-box;
  width: 100%;
  background-color: rgb(240, 255, 212);
  padding: 0 15px;
  .tck {
    padding: 0 20px;
  }
  .title {
    font-size: 16px;
    padding: 10px 0;
    font-weight: 600;
  }
  .primary {
    display: flex;
    justify-content: space-between;
    font-size: 16px;
    margin: 15px 0;
    .van-icon {
      margin-right: 10px;
    }
    .img {
      width: 45px;
      height: 45px;
      // overflow: hidden;
      // object-fit: cover;
      img {
        width: 45px;
        height: 45px;
        border-radius: 50%;
        object-fit: cover;
        margin-top: 15px;
        margin-left: 40px;
      }
    }
    .meddle {
      flex: 1;
      margin-left: 10px;
      .name {
        color: #78cbf1;
        font-size: 14px;
        margin-top: 5px;
      }
      .pl {
        margin: 15px 10px;
        word-break: break-all;
        word-wrap: break-word !important;
      }
      .datess {
        font-size: 12px;
        color: #ccc;
      }
    }
  }
  .title2 {
    font-weight: 600;
    font-size: 16px;
    padding: 10px 0;
    margin-top: 20px;
    border-top: 1px solid rgb(238, 236, 236);
    border-bottom: 1px solid rgb(243, 243, 243);
  }
  .btnoo {
    margin-top: 20px;
    margin-bottom: 60px;
  }
  .bottom {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    .van-field__body {
      input {
        border: 1px solid #ccc;
        padding: 5px 10px;
        border-radius: 25px;
        margin-right: 20px;
      }
    }
    .van-button {
      height: 32px;
      border-radius: 15px;
      font-size: 14px;
    }
  }
}
</style>
